<template>
	<div class="acf-fb">
		<h3>网格</h3>
		<el-alert type="success" :closable="false">
			<template v-slot:title>
				<span>将网格合并，分割来分组，相同分组的网格将同时触发相同行为。</span>
				<br />
				<span>通过关闭或开启网格来控制网格能否够被反应。</span>
			</template>
		</el-alert>
		
		<div class="acf-fb-grid">
			<div class="acf-fb-grid-rc">
				行:<el-input-number :model-value="feedbackStore.gridRow" :min="1" @change="changeRow"></el-input-number>
			</div>
			<div class="acf-fb-grid-rc">
				列:<el-input-number :model-value="feedbackStore.gridCol" :min="1" @change="changeCol"></el-input-number>
			</div>
			
			<div class="acf-fb-grid-view" :style="viewStyles">
				<div :class="['acf-fb-grid-cell', cell.disabled && 'is-disabled']" v-for="cell in feedbackStore.gridMap.flat()" :key="cell.key">
					<span>{{cell.groupName}}</span>
					
					<div>
						<el-popover
							placement="bottom"
							:width="240"
							trigger="click"
						>
							<template v-slot:reference>
								<el-button type="primary" plain size="small">合并</el-button>
							</template>
							<div class="acf-fb-grid-groups">
								<div 
									v-for="group in arrayGroup"
									:key="group.id"
									class="acf-fb-grid-group" 
									@click="() => mergeCell(group, cell)">
									{{group.name}}
								</div>
							</div>
						</el-popover>
						<el-button 
							v-show="feedbackStore.group.get(cell.groupId).cells.size > 1"
							type="warning"
							plain 
							size="small"
							@click="() => splitCell(cell)">
							分割
						</el-button>
					</div>
					
					<div class="acf-fb-grid-cell-more">
						<el-button
							v-show="cell.disabled"
							circle
							size="small"
							icon="CircleCloseFilled"
							type="danger"
							@click="enabledCell(cell)">
						</el-button>
						<el-button
							v-show="!cell.disabled"
							circle
							size="small"
							icon="SuccessFilled"
							type="success"
							@click="disabledCell(cell)">
						</el-button>
					</div>
				</div>
			</div>
		</div>
		
		<h3>按键</h3>
		<el-alert type="success" :closable="false">
			<template v-slot:title>
				<span>可以给组别设置已导入的声乐。</span>
				<br />
				<span>可以给组别绑定按键，没有按键的组别网格只能通过点击触发。一个按键只能绑定一个组别。</span>
			</template>
		</el-alert>
		
		<div class="acf-fb-kb">
			<div
				v-for="group in arrayGroup"
				:key="group.id"
				class="acf-fb-kb-item">
				<span>组别 {{group.name}}</span>
				
				<el-tag round class="acf-fb-kb-kb" size="large">
					<UIKbInput
						:model-value="group.keyboard"
						placeholder="未设置" 
						:show-status="false" 
						@notallowed="showNotAllowedKbCodeMsg"
						@change="kbCode => changeGroupKb(group.id, kbCode)">
						<template v-slot:default="{ kbCode }">
							<span class="acf-fb-kb-label">
								<UIIcon icon="keyboard" />
								{{kbCode}}
							</span>
						</template>
					</UIKbInput>
				</el-tag>
				
				<el-tag round class="acf-fb-kb-sound" size="large">
					<el-dropdown @command="commond => changeGroupSound(group.id, commond)">
						<span class="acf-fb-kb-label">
							<UIIcon icon="play" @click="vocalTempSound(group.sound)" />
							{{group.sound.name}}
							<el-icon>
								<arrow-down />
							</el-icon>
						</span>
						<template v-slot:dropdown>
							<el-dropdown-menu style="width: 240px;overflow: auto;max-height: 300px;">
								<el-dropdown-item v-for="sound in soundStore.allSounds" :key="sound.id" :command="sound.id">
									<span class="acf-fb-kb-label">
										<UIIcon icon="play" @click.stop="vocalTempSound(sound)" />
										{{sound.name}}
									</span>
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</el-tag>
			</div>
		</div>
	</div>
</template>

<script setup>
	
	import { ref, computed, onDeactivated } from 'vue';
 	import useFeedbackStore from './useFeedbackStore';
	import useSoundStore from './useSoundStore';
	import UIIcon from '@/ui/icon';
	import UIKbInput from '@/ui/kbInput';
	import pluginsMessage from '@/plugins/message';
	
	const feedbackStore = useFeedbackStore();
	const soundStore = useSoundStore();
	
	let msgCloseHandle;
	
	const viewStyles = computed(() => {
		return {
			'grid-template-columns': `repeat(${feedbackStore.gridCol}, 1fr)`
		}
	})
	
	const arrayGroup = computed(() => {
		return [...feedbackStore.group].map(([key, value]) => value);
	})
	
	onDeactivated(() => {
		soundStore.clearAllSound();
	})
	
	function changeRow(number) {
		feedbackStore.changeGridRow(number);
	}
	
	function changeCol(number) {
		feedbackStore.changeGridCol(number);
	}
	
	function disabledCell(cell) {
		feedbackStore.disabledCell(cell.x, cell.y);
	}
	
	function enabledCell(cell) {
		feedbackStore.enabledCell(cell.x, cell.y);
	}
	
	function mergeCell(group, cell) {
		feedbackStore.mergeCell(group.id, cell.x, cell.y);
	}
	
	function splitCell(cell) {
		feedbackStore.splitCell(cell.x, cell.y);
	}
	
	function showNotAllowedKbCodeMsg(kbCode) {
		msgCloseHandle?.();
		msgCloseHandle = pluginsMessage.warning(`${kbCode} 不可作为输入键`);
	}
	
	function changeGroupKb(groupId, kbCode) {
		feedbackStore.bindKeyboard(groupId, kbCode);
	}
	
	function changeGroupSound(groupId, soundId) {
		feedbackStore.changeGroupSound(groupId, soundId);
	}
	
	function vocalTempSound(sound) {
		soundStore.vocalSound(sound, null, true);
	}
	
</script>

<style lang="scss" scoped>
	
	@import '@/theme/material/text';
	@import '@/theme/material/media.scss';
	
	.acf-fb {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	
	.acf-fb-grid-rc {
		display: inline-block;
		width: 50%;
		margin-bottom: 20px;
		:deep(.el-input-number) {
			margin-left: 10px;
		}
	}
	
	.acf-fb-grid-view {
		display: grid;
		gap: 5px;
		place-items: stretch;
	}
	
	.acf-fb-grid-cell {
		aspect-ratio: 1 / 1;
		border-radius: 4px;
		background: rgba(255, 255, 255, .33);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 10px;
		overflow: hidden auto;
		padding: 10px;
		cursor: pointer;
		position: relative;
		transition: all .25s;
		text-align: center;
		&:hover {
			background: rgba(255, 255, 255, .5);
			.acf-fb-grid-cell-action {
				transform: translate(-50%, -4px);
				opacity: 1
			}
		}
		&.is-disabled {
			background: rgba(88, 88, 88, 0.3);
		}
	}
	
	.acf-fb-grid-cell-more {
		position: absolute;
		top: 10px;
		right: 10px;
	}
	
	.acf-fb-grid-groups {
		height: min(300px, 75vh);
		overflow: auto;
	}
	
	.acf-fb-grid-group {
		cursor: pointer;
		& + & {
			margin-top: 10px;
		}
		&:hover {
			color: var(--el-color-primary);
		}
	}
	
	.acf-fb-kb {
		display: flex;
		gap: 20px 40px;
		flex-wrap: wrap;
	}
	
	.acf-fb-kb-item {
		width: calc((100% - 40px) / 2);
		@include mediaMd {
			width: calc((100% - 40px * 2) / 3);
		}
		display: grid;
		grid-template-columns: 60px 1fr 1fr;
		place-items: center stretch;
		gap: 10px;
	}
	
	.acf-fb-kb-kb {
		&:hover {
			color: #1abc9c;
		}
	}
	
	.acf-fb-kb-sound {
		&:hover {
			color: #f39c12;
		}
		:deep(.el-dropdown) {
			color: inherit;
		}
	}
	
	.acf-fb-kb-label {
		font-size: 13px;
		display: inline-flex;
		gap: 6px;
		justify-content: center;
		align-items: center;
		:deep(.ui-icon) {
			cursor: pointer;
		}
	}
	
</style>